/**
 * 配置开发环境常用的配置: 让代码运行
 *    项目运行指令:         Tips: 这两个指令都被全局安装 npm xxx -g
 *        webpack 会将打包结果输出出去
 *        webpack-dev-server 只会在内存中编译打包, 没有输出
 *
 *   HMR: hot module replacement 热模块替换 / 模块热替换
 *    作用: 一个模块发生变化时, 只会重新打包这一个模块 (而不是打包所有模块)
 *          极大提升构建速度
 *
 *    样式文件: 可以使用HMR功能: 因为style-loader内部实现了
 *    js文件:   默认不能使用HMR功能 --> 需要修改js代码, 添加支持HMR功能的代码
 *        注意: HMR功能对js的处理, 只能处理非入口js文件的其他文件
 *    html文件: 默认不能使用HMR功能, 同时会导致问题: html文件不能热更新  (单页面应用不需要做HMR功能 ?)
 *        解决: 修改entry入口, 将HTML文件引入.    从string -> Array<string>
 */

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const commonCssLoader = [
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../'
    }
  },
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        require('postcss-preset-env')()
      ]
    }
  }
]

module.exports = {
  entry: ['./src/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  mode: 'development',
  module: {
    rules: [
      // 配置css
      {
        test: /\.(css)$/,
        use: [...commonCssLoader],
      },
      // 配置less
      {
        test: /\.(less)$/,
        use: [...commonCssLoader, 'less-loader'],
      },
      // 配置图片
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10 * 1000,
          name: '[hash:8].[ext]',
          // Tips: webpack v4.44.6版本问题, 使用esModule关闭es6模块化
          esModule: false,
          // 配置outputPath可以将图片资源单独打包到 build/img/ 目录中
          outputPath: 'img'
        }
      },
      {
        test: /\.(html)$/,
        loader: 'html-loader',
        options: {
          name: '[hash:8].[ext]',
        }
      },
      // 配置其他资源, 如字体
      {
        exclude: /\.(css|less|js|json|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:8].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new MiniCssExtractPlugin({
      filename: 'css/app.css'
    })
  ],
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    port: 3000,
    compress: true,
    // 开启HMR功能
    // 当修改了
    hot: true
  }
}
